<template>
  <div>
    <headerT title="预约产品"  :isShowBack="false"/>
    <div class="pageNormalBackground headMarginTop pagesMain">
      <div class="displayFlex everyPadding headTitleBox">
        <div class="displayFlex nav">
          <div :class="flag==1?'active':''" @click="tabNav(1)">全部预约</div>
          <div :class="flag==2?'active':''" @click="tabNav(2)">我的预约</div>
        </div>
        <div class="searchBox">
           <div class="displayFlex searchIcon" v-if="flag==1 && isInput==false"  @click="tabInput">
            <img src="../../../static/images/search.png" alt="" />
            <p class="searchTel" >商品名搜索</p>
          </div>
          <div class="displayFlex searchIcon" v-if="flag==2 && isInput==false">
            <img src="../../../static/images/search.png" alt=""  @click="tabInput" />
            <p class="searchTel" @click="$tools.goPage('/writeYuyuePhone')" >号码查找</p>
          </div>
          <div class="searchInput" v-if="isInput==true">
            <input type="text" placeholder="请输入商品名" v-if="flag==1" />
            <input type="text" placeholder="请输入商品名" v-if="flag==2" />
          </div>
        </div>
      </div>

      <div class="everyBlockBgcolor everyPadding pageContent">
        <div class="allYuyue" v-if="flag==1 && appointmentList.length!=0">
          <div class="displayFlex allList" v-for="(item,index) in appointmentList" :key="index">
            <img src="../../../static/images/lishi.png" alt />
            <div class="allListTitle">
              <p class="allTitle">{{item.goods_name}}</p>
              <p class="allContent">{{item.goods_title}}</p>
              <div class="displayFlex yuyueBox">
                <p>提前{{item.appointment_days_num}}天预约</p>
                <p class="btnYuyue" @click="$tools.goPage_query('writeYuyue',{allYuyueId:item.id})">预约</p>
              </div>
            </div>
          </div>
        </div>
        <div class="noData" v-if="flag==1 && appointmentList.length==0">暂无数据</div>
        <div class="productMain" v-if="flag==2 && myYuyueList.length!=0">
          <div class="displayFlex productList" v-for="(item,index) in myYuyueList" :key="index" @click="$tools.goPage_query('yuyueSuccess',{yuyueId:item.id,yuyueType:1})">
            <img v-if="item.good_info!=null && item.good_info.good_img.length!=0"
              :src="item.good_info.good_img[0].img_url" alt="" />
            <div class="productInfo">
              <div class="productTitle">{{item.good_info!=null ?item.good_info.goods_name:''}}</div>
              <div class="displayFlex productTime">
                <img src="../../../static/images/time.png" alt="" />
                <p>入住日期 {{item.appointment_date}}</p>
              </div>
              <div class="yuyueStatus">预约成功</div>
            </div>
          </div>
        </div>
        <div class="noData" v-if="flag==2 && myYuyueList.length==0">暂无数据</div>
      </div>
    </div>
    <tabcard style="position: fixed;width: 100%;bottom:0;" />
  </div>
</template>

<script>
import headerT from "@/components/header";
import tabcard from "@/components/tabCard";
import { appointmentList,appointmentOfMy } from "@/services/yuyueProduct";
export default {
  name: "login",
  components: {
    tabcard,
    headerT
  },

  data() {
    return {
      flag: 1,
      isInput: false,//是否显示搜索商品的输入框
      isCode:false,//是否消费码搜索
      isSearch:false,//是否显示搜索

      appointmentList:[],//全部预约列表

      allNeedInfo: {
        id:'',
        goog_name: "", //商品名
        page: 1,
        pageSize: 10
      },
      allTotalPage: 0, //预约产品总页数

      needInfo: {
        id: "",
        consume_code: "", //消费码
        goods_name: "", //商品名
        page: 1,
        pageSize: 10
      },
      totalPage: 0, //总页数
      myYuyueList: [], //我的预约列表
    };
  },

  created(){
    this.getAppointmentList()
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    //全部预约
    getAppointmentList(){
      this.$vux.loading.show({
        text: "Loading"
      });
      this.$post(appointmentList,this.allNeedInfo).then(res=>{
        this.$vux.loading.hide();
        this.allTotalPage = res.data.last_page;
        if (this.allNeedInfo.page == 1) {
          this.appointmentList = res.data.data;
          this.allNeedInfo.page = res.data.current_page;
        } else {
          this.appointmentList = [...this.appointmentList, ...res.data.data];
        }
      }).catch(error=>{
        this.$vux.loading.hide();
      })
    },
    //我的预约列表
    getList() {
      this.$vux.loading.show({
        text: "Loading"
      });
      this.$post(appointmentOfMy, this.needInfo)
        .then(res => {
          this.$vux.loading.hide();
          this.totalPage = res.data.last_page;
          if (this.needInfo.page == 1) {
            this.myYuyueList = res.data.data;
            this.needInfo.page = res.data.current_page;
          } else {
            this.myYuyueList = [...this.myYuyueList, ...res.data.data];
          }
        })
        .catch(error => {
          this.$vux.loading.hide();
        });
    },
    handleScroll() {
      //分页加载数据
      if (
        document.documentElement.scrollTop + window.innerHeight >=
        document.body.offsetHeight
      ) {
        if(this.flag==1){
          if (this.allNeedInfo.page >= this.allTotalPage) {
            return;
          } else {
            this.allNeedInfo.page = this.allNeedInfo.page + 1;
            this.getAppointmentList();
          }
        }else if(this.flag==2){
          if (this.needInfo.page >= this.totalPage) {
            return;
          } else {
            this.needInfo.page = this.needInfo.page + 1;
            this.getList();
          }
        }
      }
    },
    tabNav(num) {//tab切换
      this.isInput=false
      this.flag = num;
      if(num==2){
        this.getList()
      }else if(num==1){
        this.getAppointmentList()
      }
    },
    //是否显示搜索框
    tabInput() {
      this.isInput=!this.isInput
    },
    toWriteYuyue(){
       this.$tools.goPage('/writeYuyue')
    },
    toYuyueSuccess(){
       this.$tools.goPage('/yuyueSuccess')
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less" type="text/css">
@colorRed: #f64135;
@fontsize32: 0.32rem;
.everyPadding {
  padding: 0 0.27rem;
}
.pagesMain {
  padding-bottom: 1.5rem;
}

// box-sizing: border-box;
.headTitleBox {
  height: 1.48rem;

  .nav {
    // border: 1px solid red;
    width: 60%;
    font-size: 0.32rem;
    color: #4e4e4e;
    justify-content: space-around;
    div {
      padding: 0.4rem 0rem;
    }
    .active {
      color: @colorRed;
      position: relative;
      font-size: 0.44rem;
      font-weight: bold;
    }
    .active:after {
      content: "";
      width: 0.67rem;
      height: 0.1rem;
      background: linear-gradient(
        270deg,
        rgba(246, 65, 53, 0.3) 0%,
        rgba(246, 65, 53, 1) 100%
      );
      border-radius: 1rem;
      display: block;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .searchBox {
    // border: 1px solid red;
    width: 40%;
    .searchIcon {
      justify-content: center;
      img {
        display: block;
        width: 0.32rem;
        height: 0.32rem;
      }
      p {
        margin-left: 0.4rem;
        padding: 0 0.34rem;
        font-size: 0.32rem;
        color: #747474;
        border-left: 1px solid #c2c2c2;
      }
    }

    .searchInput {
      // border: 1px solid red;
      width: 100%;
      input {
        width: 90%;
        padding: 0.3rem 0.1rem;
        border: none;
        &::-webkit-input-placeholder {
          color: #c8c8c8;
        }
      }
    }
  }
}

.pageContent {
  .allList {
    height: 3.43rem;
    border-bottom: 1px solid #ebebeb;
    img {
      width: 2.88rem;
      height: 2.44rem;
      display: block;
    }
    .allListTitle {
      margin-left: 0.2rem;
      width: calc(~"100% - 3rem");
      .allTitle {
        color: #4e4e4e;
        font-size: 0.34rem;
        height: 0.5rem;
        font-weight: bold;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        word-break: break-all;
      }
      .allContent {
        font-size: 0.3rem;
        height: 1rem;
        color: #9f9f9f;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        word-break: break-all;
        margin: 0.08rem 0 0.1rem 0;
      }
      .yuyueBox {
        // margin-top: 0.25rem;
        justify-content: space-between;
        color: #ffc403;
        font-size: 0.3rem;

        .btnYuyue {
          font-size: 0.32rem;
          width: 1.28rem;
          height: 0.59rem;
          background: linear-gradient(
            90deg,
            rgba(246, 65, 53, 1) 0%,
            rgba(255, 205, 88, 1) 100%
          );
          box-shadow: 0rem 0rem 0rem rgba(255, 112, 79, 0.4);
          border-radius: 1rem;
          text-align: center;
          line-height: 0.59rem;
          color: #ffffff;
          font-weight: 400;
        }
      }
    }
  }

  .productList {
    height: 3.23rem;
    border-bottom: 1px solid #ebebeb;
    img {
      display: block;
      width: 2.88rem;
      height: 2.44rem;
    }
    .productInfo {
      padding: 0 0.3rem;
      width: calc(~"100% - 3rem");
      .productTitle {
        height: 0.5rem;
        font-size: @fontsize32;
        color: #4e4e4e;
        font-weight: bold;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        word-break: break-all;
      }
      .productTime {
        font-size: 0.3rem;
        color: #9f9f9f;
        margin: 0.23rem 0 0.32rem 0;
        img {
          display: block;
          width: 0.38rem;
          height: 0.38rem;
        }
        p {
          padding: 0 0.2rem;
        }
      }
      .yuyueStatus {
        font-size: @fontsize32;
        color: #39e578;
      }
    }
  }
}
</style>
